<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type='text/javascript' src='../js/vue.js'></script>
    <script type='text/javascript' src='../js/dayjs.min.js'></script>

</head>

<body>
    <!-- 
        永远不要相信用户的输入

        1、作用：向指定节点中渲染包含html结构的内容
        2、与插值语法的区别：
            （1）v-html会替换接地那种所有内容，{{xx}}不会
            （2）v-html可以识别html结构
        3、v-html安全问题
            在网站上不要动态渲染HTML，容易受到XSS攻击

        v-html解析html标签
     -->
    <div id="root">
        <div>{{name}}</div>
        <div v-html="str"></div>
    </div>
    <script>
        Vue.config.productionTip = false;

        new Vue({
            el: '#root',
            data: {
                name:'宋亚轩',
                str:'<h3>宋亚轩<h3>'
            }

        })
    </script>
</body>

</html>